<template>
    <div class="container_1">
        <h2>{{ title }}</h2>
        <button @click="increment">点击我</button>
        <p>计数：{{ count }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const title = '一个组件';
const count = ref(0);

function increment() {
    count.value++;
}
</script>

<style scoped>
h2 {
    color: rgb(137, 137, 253);
}
.container_1 {
  text-align: center;
  margin-top: 50px;
  background-color: rgb(235, 235, 235);
  border-radius: 15px;
  padding: 10px;
  margin: 20px;
}

button {
    margin-top: 10px;
}
</style>